<template>
  <view v-if="!hasLogin" class="empty need_login">
    <u-empty text="未登录" mode="permission">
      <button size="mini" slot="bottom" class="go-to-login"
              @click="gotoPath('/pages/login/index?from=my_coupon' + serializeParam(options),false)">请先登录
      </button>
    </u-empty>
  </view>
  <view v-else class="container m-b5 my-coupon-box">
    <!-- 顶部选项卡 -->
    <view class="swiper-tab dis-flex box-align-center flex-y-center">
      <view :class="'swiper-tab-item ' + (dataType === '0' ? 'on' : '')" data-current="0" @tap="swichNav">
        未使用
      </view>
      <view :class="'swiper-tab-item ' + (dataType === '1' ? 'on' : '')" data-current="1" @tap="swichNav">
        已使用
      </view>
      <view :class="'swiper-tab-item ' + (dataType === '2' ? 'on' : '')" data-current="2"
            @tap="swichNav">已过期
      </view>
    </view>

    <scroll-view :scroll-y="true" :style="'height: ' + swiperHeight + 'px;'">
      <view class="coupon-list" v-if="list.length">
        <view class="coupon-item" v-for="(item, index) in list" :key="index">
          <view :class="'item-wrapper color__' + (item.state.value ? item.color.text : 'gray')">
            <view class="coupon-type">{{ item.coupon_type.text }}</view>
            <view class="tip dis-flex flex-dir-column flex-x-center">
              <view v-if="item.coupon_type.value == 10">
                <text class="f-30">￥</text>
                <text class="money">{{ item.reduce_price }}</text>
              </view>
              <text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
              <text class="pay-line">满{{ item.min_price }}元可用</text>
            </view>
            <view class="split-line"></view>
            <view class="content dis-flex flex-dir-column flex-x-between">
              <view class="title">{{ item.name }}</view>
              <view class="bottom dis-flex flex-y-center">
                <view class="time flex-box">
                  <text class="f-24">{{ item.start_time.text }}~{{ item.end_time.text }}</text>
                </view>
                <view class="state">
                  <text class="f-24">{{ item.state.text }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bsshop-notcont" v-else>
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
    </scroll-view>
    <fab icon_name="plus" url="/pages/packageA/coupon/index" background-color="#e130a9"></fab>
  </view>
</template>

<script>
import coupon_api from "@/common/coupon_api";
import fab from "@/pages/packageA/components/fab/index.vue";

export default {
  components: {
    fab
  },
  data() {
    return {
      // 选项卡标示
      dataType: '0',
      // 列表高度
      swiperHeight: 0,
      // 优惠券列表
      list: [],
      // show
      notcont: false,
      options: null
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
     this.options = options;
    // 设置swiper的高度
    this.setSwiperHeight();
  },
  onPullDownRefresh() {
    this.getCouponList();
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 获取优惠券列表
    this.getCouponList();
  },
  methods: {
    /**
     * 获取优惠券列表
     */
    getCouponList: function () {
      let that = this;
      coupon_api.my_list({
        status: that.dataType
      }).then(res => {
        if (res.code === 0) {
          that.setData({
            list: res.data.list,
            notcont: !res.data.list.length > 0
          });
        }
      })
    },

    /**
     * 设置swiper的高度
     */
    setSwiperHeight: function () {
      // 获取系统信息(拿到屏幕宽度)
      let systemInfo = uni.getSystemInfoSync();
      let rpx = systemInfo.windowWidth / 750;
      let // 计算rpx
          tapHeight = Math.floor(rpx * 80) + 1;
      let // tap高度
          swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
      this.setData({
        swiperHeight
      });
    },

    /**
     * 点击tab切换
     */
    swichNav: function (e) {
      let that = this;
      that.setData({
            list: [],
            dataType: e.target.dataset.current
          },
          function () {
            // 获取优惠券列表
            that.getCouponList();
          }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
@import './my.scss';
</style>
